<template>
    <div>
        <table>
            <tbody>
                <tr>
                    <th> <input type="checkbox" v-model="checkAll" /> 全选/全不选</th>
                    <th v-for="(item,index) in titles" :key="index">{{item}}</th>
                </tr>
                <tr v-for="(item,index) in books" :key="item.name">
                    <td> <input type="checkbox" v-model="checkList[index]"> </td>
                    <td>{{item.name}}</td>
                    <td>{{item.date}}</td>
                    <td>{{item.price}}</td>
                    <td> <button @click="add(index)">+</button> {{item.num}} <button @click="sub(index)">-</button>
                    </td>
                    <td><button @click="del(index)">移除</button></td>
                </tr>
                <tr>
                    <td colspan="6">总价格：{{totalPrice | keyTwo}} ￥</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: '',
        components: {

        },
        props: {

        },
        data() {
            return {
                titles: ['书籍名称', '出版日期', '价格', '数量', '操作'],
                checkList: [false, false, true, false], //数组专门用来表示每一项勾选情况
                books: [{
                    name: '算法导论',
                    date: '2006-9',
                    price: 85,
                    num: 1
                }, {
                    name: 'UNIX编程艺术',
                    date: '2006-2',
                    price: 59,
                    num: 1
                }, {
                    name: 'Vue程序设计',
                    date: '2008-10',
                    price: 35,
                    num: 1
                }, {
                    name: '颈椎康复',
                    date: '2006-3',
                    price: 129,
                    num: 1
                }, ]
            };
        },
        methods: {
            add(index) {
                this.books[index].num++
            },
            sub(index) {
                if (this.books[index].num <= 1) {
                    return
                }
                this.books[index].num--
            },
            del(index) {
                this.books.splice(index,1)
                this.checkList.splice(index,1)
            }
        },
        computed: {
            // 总价
            totalPrice() {
                return this.books.reduce((prev, current,index) => {
                    return prev + (this.checkList[index] ? current.price: 0 )
                }, 0)
            },
            // 全选/全不选
            checkAll:{
                set(newVal){ //checkAll被修改会执行set
                    console.log(newVal)
                    this.checkList = this.checkList.map(item => newVal)
                },
                get(){
                    return !this.checkList.includes(false)   //只要checkList没有false就是全选
                }
                
            }
        },
        filters: {
            keyTwo(val) {
                return val.toFixed(2)
            }
        }
    };
</script>

<style scoped lang="less">
    table {
        width: 700px;
        margin: 10px auto;
        border: 1px solid #ddd;
        border-collapse: collapse;
        color: #666;
        font-size: 14px;
    }

    table th {
        width: 130px;
        border: 1px solid #ddd;
    }

    table tr {
        height: 70px;
    }

    table td {
        padding-left: 10px;
        border: 1px solid #ddd;
    }

    button {
        height: 30px;
        padding: 0 10px;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        border: none;
        background-color: #87CEEB;
    }
</style>